<template>
  <div class="boss">
    <span class="input2">创建时间 :</span><span class="input2"><input type="date" style="width: 300px;height: 30px;border-radius: 10px;margin-top: 5px;color: #4b4b4b;"  v-model="value1" @change="calendar(value1)"  /></span>
    <a-input-search
      v-model:value="value"
      placeholder="会员姓名"
      enter-button
      class="input1"
      @search="onSearch"
      @blur="onBlur"  
    />
    <p class="rightbutton">
      <a-button type="primary" size="large" @click="delAl" class="button">
      <template #icon>
        <delete-outlined />
      </template>
             批量删除
    </a-button> 
      <a-button type="primary" size="large" shape="round" @click="add">
      <template #icon>
        <form-outlined />
      </template>
             添加
    </a-button>
    <a-button type="primary" shape="round" :size="size" @click="excelp" >
      <template #icon>
        <export-outlined />
      </template>
          导出
    </a-button>
  </p>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref,onMounted } from 'vue';
import type { SizeType } from 'ant-design-vue/es/config-provider';
import { ExportOutlined,FormOutlined,SearchOutlined,DeleteOutlined } from '@ant-design/icons-vue';
import Bus from '@/mitt/index'
export default defineComponent({
  components:{
    ExportOutlined,
    FormOutlined,
    SearchOutlined,
    DeleteOutlined
  },
  emits :{
        'search':null, //自定义事件名 后面 :null 表示不进行验证
        'excelp':null, //自定义事件名 后面 :null 表示不进行验证
        'calendar':null, //自定义事件名 后面 :null 表示不进行验证
        'one':null, //自定义事件名 后面 :null 表示不进行验证
     },
  setup(props,ctx) {
    const value = ref<string>('');
      const onSearch = (searchValue: string) => {
          console.log('use value', searchValue);
          console.log('or use this.value', value.value);
          ctx.emit('search',searchValue)
    };
    const value1 = ref<any>()
    const excelp =()=>{
      ctx.emit('excelp')
    }
    //批量删除
    const delAl =()=>{
       Bus.emit('delAll')
    }
    const calendar =(calendar:any)=>{
       console.log('通过开卡时间进行搜索',calendar);
        ctx.emit('calendar',calendar)
    }
    const onBlur  =()=>{
       console.log('打印了');
       ctx.emit('one')
       
    }
    const  add =()=>{
       Bus.emit('add')
    }
    return {
      value,
      onSearch,
      size: ref<SizeType>('large'),
        excelp,
        onBlur,
        add,
        ssize: ref<any>('large'),
          value1,
          calendar,
          delAl
    };
  },
});
</script>
<style lang="less" scoped>
 .ant-input-group-wrapper{
   width: 300px;
 }
 .boss{
  width: 100%;
  position: relative;
 
  .rightbutton{
      position: absolute;
      top: 0px;
      right: 3%;
      .ant-btn{
        margin-right: 20px;
      }
  }
 }
 .input1{
  margin-left: 30px;
  margin-top: 5px;
 
 }
  .input2{
     margin-left: 30px;
     font-size: 16px;
  }
  .button{
   /*  z-index: 1;
  position: relative;
  font-size: inherit;
  font-family: inherit;
  color: white;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  background-color: hsl(#8fd4ff);
  overflow: hidden;
  transition: color 0.4s ease-in-out; */
  z-index: 1;
  position: relative;
  font-size: inherit;
  font-family: inherit;
  color: white;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  background-color: hsl(#65befc);
  border-radius: 15px;
  }
  .button::before {
 /*  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #3cefff;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out; */
  content: '';
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fc2f70;
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 0.25s ease-in-out;
}
.button:hover {
  cursor: pointer;
  color: red;
}

.button:hover::before {
  /* transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15); */
  transform-origin: center top;
  transform: scaleY(1);
}
</style>